<template>
  <div class="product-detail">
    <el-card shadow="never">
      <el-steps class="section-step" :active="step" finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </el-card>
    <!-- 表单部分 -->
    <el-card shadow="never" class="content">
      <!-- form表单 -->
      <el-form ref="form" :model="product" label-width="80px" :inline="false" size="normal">
        <!-- 第一个步骤 -->

        <div v-show="step === 1" class="section-1">
          <div>基本信息:</div>
          <el-divider />
          <el-form-item label="商品名称">
            <el-input v-model="product.name" size="small" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="product.name" size="small" />
          </el-form-item>
          <el-form-item label="品牌管理">
            <el-select v-model="product.brandId" size="small" value-key="" placeholder="" clearable filterable>
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

          </el-form-item>
        </div>
        <!-- 第二个步骤 -->
        <div v-show="step === 2" class="section-2">
          <div>sku信息:</div>
          <el-divider />
          <el-form-item label="sku设置">
            <!-- 显示选项 -->
            <el-checkbox-group v-model="colorSkuAttrs.colorAttrSelect">
              <el-checkbox
                v-for="item in colorSkuAttrs.colorAttrList"
                :key="item"
                size="mini"
                :label="item"
              >
                {{ item }}
                <span style="color:red;" @click.stop="removeSkuAttr('color',item)">删除</span>
              </el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group v-model="sizeSkuAttrs.sizeAttrSelect">
              <el-checkbox
                v-for="item in sizeSkuAttrs.sizeAttrList"
                :key="item"
                size="mini"
                :label="item"
              >
                {{ item }}
                <span style="color:red;" @click.stop="removeSkuAttr('size',item)">删除</span>
              </el-checkbox>
            </el-checkbox-group>
            <!-- 用于录入创建选项 -->
            <el-input
              v-model="colorSkuAttrs.text"
              class="sku-input"
              placeholder="颜色描述:土豪金"
              size="mini"
              clearable
            />
            <el-button type="default" size="small" @click="createColorAttr">创建颜色选项</el-button>
            <el-input
              v-model="sizeSkuAttrs.text"
              class="sku-input"
              placeholder="大小描述: 128g"
              size="mini"
              clearable
            />
            <el-button type="default" size="small" @click="createSizeAttr">创建大小选项</el-button>
            <el-button type="primary" size="small" @click="createSkuList">生成sku列表</el-button>
            <!-- 生成的sku数据列表 -->
            <el-table v-if="skuList.length>0" :data="skuList" border stripe>
              <el-table-column type="index" label="#" :width="50" />
              <el-table-column label="图片" width="100">
                <template slot-scope="scope">
                  <!-- native: # https://cn.vuejs.org/v2/guide/components-custom-events.html -->
                  <el-upload
                    :key="scope.row.tempId"
                    :ref="'upload_'+scope.row.tempId"
                    action="/lejuAdmin/material/uploadFileOss"
                    :headers="{token: token}"
                    class="avatar-uploader"
                    :show-file-list="false"
                    :on-success="handleSkuPicUploadSucc"
                    @click.native="setTempSkuId(scope.row.tempId)"
                  >
                    <el-button v-if="!scope.row.pic" style="margin-left: 10px;" size="small" type="success">上传</el-button>
                    <img v-if="scope.row.pic" style="width:40px;height:40px" :src="scope.row.pic" alt="">
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column label="颜色" :width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.color" placeholder size="mini" clearable />
                </template>
              </el-table-column>
              <el-table-column label="大小" :width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.size" placeholder size="mini" clearable />
                </template>
              </el-table-column>
              <el-table-column label="库存" :width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.stock" placeholder size="mini" clearable />
                </template>
              </el-table-column>
              <el-table-column label="sku编码" :width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.skuCode" placeholder size="mini" clearable />
                </template>
              </el-table-column>
              <el-table-column label="操作" :width="200">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="removeSkuItem(scope.row.tempId)"
                  >删除sku</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
        <!-- 第三个步骤 -->
        <div v-show="step === 3" class="section-3">
          <div>其他信息</div>
          <el-divider />
        </div>
      </el-form>
    </el-card>

    <el-button v-if="step>1" type="primary" size="default" @click="goPre">上一步</el-button>
    <el-button v-if="step<3" type="primary" size="default" @click="goNext">下一步</el-button>
    <el-button v-if="step==3" type="primary" size="default" @click="doSaveProduct">提交保存</el-button>
  </div>
</template>

<script>
// # https://www.npmjs.com/package/uuidjs
import UUID from 'uuidjs'
import { getToken } from '@/utils/myAuth'
import { findAllBrand as findAllBrandApi } from '@/api/brand'
import { addProductAndSkus as addProductAndSkusApi } from '@/api/product'
export default {
  name: 'ProductDetail',
  components: {},
  data() {
    return {
      step: 1,
      product: {}, // 表单对象
      colorSkuAttrs: {
        text: '', // input的model
        colorAttrList: ['土豪金', '翡翠绿', '天空蓝'], // 翡翠绿/土豪金/天空蓝
        colorAttrSelect: ['土豪金', '翡翠绿'] // 选中的颜色集合
      },
      sizeSkuAttrs: {
        text: '',
        sizeAttrList: ['64g', '128g'], // 64g/128g/256g
        sizeAttrSelect: ['64g', '128g'] // 选中的size集合
      },
      skuList: [], // sku集合
      brandList: [], // 品牌列表集合
      tempSkuId: '' // 临时的skuid,用于确定哪个sku被点击了上传
    }
  },
  computed: {
    token() {
      return getToken()
    }
  },
  created() {
    // 初始化品牌列表数据
    this.findAllBrand()
  },
  mounted() {},
  methods: {
    // 创建sku
    createColorAttr() {
      // 把表单的input内容添加到颜色列表集合
      this.colorSkuAttrs.colorAttrList.push(this.colorSkuAttrs.text)
      // 完了之后清除表单内容
      this.colorSkuAttrs.text = ''
    },
    createSizeAttr() {
      this.sizeSkuAttrs.sizeAttrList.push(this.sizeSkuAttrs.text)
      // 完了之后清除表单内容
      this.sizeSkuAttrs.text = ''
    },
    // 根据类型删除某个数据
    removeSkuAttr(type, value) {
      // 删除颜色的sku
      if (type === 'color') {
        // ['土豪金','翡翠绿'] ==> 过滤!== '翡翠绿'的结果
        this.colorSkuAttrs.colorAttrList = this.colorSkuAttrs.colorAttrList.filter(
          item => item !== value
        )
      } else if (type === 'size') {
        this.sizeSkuAttrs.sizeAttrList = this.sizeSkuAttrs.sizeAttrList.filter(
          item => item !== value
        )
      }
    },
    // 根据所有选中的sku属性,生成sku列表
    createSkuList() {
      // 先清除之前的sku列表,为了避免误操作还可用添加确认对话框
      this.skuList = []
      // 最简单的形式 好比打印9*9乘法表
      const { colorAttrSelect } = this.colorSkuAttrs
      const { sizeAttrSelect } = this.sizeSkuAttrs
      for (var i = 0; i < colorAttrSelect.length; i++) {
        for (var j = 0; j < sizeAttrSelect.length; j++) {
          // 构建一个对象
          // {
          //   'id': 'string', // 如果是新增 不需要
          //   'lockStock': 0, // 锁定库存
          //   'lowStock': 0, // 库存警戒线
          //   'pic': 'string', // 图片
          //   'price': 0, // 当前价格
          //   'productId': 'string', // 商品的id,如果是新增,不需要
          //   'promotionPrice': 0, // 单品促销价格
          //   'sale': 0, // 销量
          //   'skuCode': 'string', // sku的编码,手动填写
          //   // spData:  [{"key":"颜色","value":"蓝色"},{"key":"容量","value":"32G"}]
          //   'spData': 'string', // sku属性，json格式String类型 ,
          //   'stock': 0 // 库存
          // }
          var skuObj = {
            // 临时变量,只用于删除sku使用,并不能作为后台数据的唯一id
            tempId: UUID.genV4().toString(),
            pic: 'https://img1.baidu.com/it/u=1920333544,2898738499&fm=26&fmt=auto&gp=0.jpg',
            price: 149900,
            promotionPrice: 0,
            skuCode: '',
            stock: 99,
            color: colorAttrSelect[i],
            size: sizeAttrSelect[j]
          }
          this.skuList.push(skuObj)
        }
      }
    },
    // 从生成的sku列表种删除某个sku
    removeSkuItem(tempId) {
      // 投机取巧?? 使用过滤器替代数组的删除方法!
      // 如果数据量小,可以. 如果数据量很大,不推荐!!
      this.skuList = this.skuList.filter(item => item.tempId !== tempId)
    },
    // 设置标识,直到哪个sku被点击了
    setTempSkuId(tempId) {
      // console.log('tempId', tempId)
      this.tempSkuId = tempId
    },
    // 如果sku图片上传成功后,可以根据tempId把当前图片赋给相关的sku对象
    handleSkuPicUploadSucc(res, file, fileList) {
      const { success, data, message: errMsg } = res
      if (success) {
        const { fileUrl } = data
        // 把fileUlr根据tempSkuId赋给响应的对象
        var sku = this.skuList.find(item => item.tempId === this.tempSkuId)
        if (sku) {
          sku.pic = fileUrl
        }
        // 清空上传列表
        // 可以通过给每个upload组件设置一个唯一的ref,再通过标记refid删除
        // this.$refs['upload_'+this.tempSkuId].clearFiles()
      } else {
        this.$message.error(errMsg)
      }
    },
    // 查询所有的品牌列表
    findAllBrand() {
      findAllBrandApi()
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { items } = data
            this.brandList = items
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    goNext() {
      if (this.step < 3) {
        this.step++
      }
    },
    goPre() {
      if (this.step > 1) {
        this.step--
      }
    },
    // 提交保存
    // 1. 因为字段太多,为了避免提交无效/错误数据,建议先写死.
    doSaveProduct() {
      // 单独模拟一个商品明细的数据对象
      var productDetail = {
        'albumPics': 'https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20210818172800651cropped-1920-1200-1018616.jpg,https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20210818172756433haibao.jpg', // 画册图片，连产品图片限制为5张，以逗号分割 ,会在移动端商品详情页展示
        'brandId': '1425319954517934081', // 关联的 品牌id
        'brandName': '安宝宝', // 品牌名称
        'description': '意式极简北欧轻奢卧室电视柜高款现代北欧(测试数据)', // 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）
        // detail是进入详情页展示的内容
        'detailDesc': '家具新品大赏：1件7.5折，2件7.2折，满额在享2%现金返现，', // 家具新品大赏：1件7.5折，2件7.2折，满额在享2%现金返现，超值好礼送不停！时间：11.14-11.20
        'detailMobileHtml': '<div><h2>打折了!</h2><p style="color:orange;font-size:30px;">给钱就卖!</p><img src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20210816134951062IMG_32248292_1.jpg"/></div>', // 移动端展示方式,商品的富文本内容,放到这个字段
        'detailTitle': '简野 电视柜 意式极简北欧轻奢卧室', // 简野 电视柜 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）
        'giftGrowth': 0, // 赠送的成长值(预留)
        'giftPoint': 0, // 赠送的积分(预留)
        'keywords': ' 地中海,凳子', // 关键词,逗号分割,  地中海,凳子,xxx
        'lowStock': 0, // 预警库存(预留)
        'name': '泸州老窖1573(测试)', // 商品名称 简野（JIANYE）ZY-22
        'newStatus': 0, // 新品状态:0->不是新品；1->新品 ,新品会在移动端首页推荐
        'note': '小心发布,避免官司纠纷.', // 备注,比如小舅子供货不入账 ,
        'originalPrice': 1599, // 原价
        'pic': 'https://img0.baidu.com/it/u=1374154583,1635124570&fm=26&fmt=auto&gp=0.jpg', // 封面图片
        'previewStatus': 1, // 是否为预告商品：0->不是；1->是 ,
        'price': 1499, // 当前价格
        'productCategoryId': '1308339256886423554', // 分类id
        'productCategoryName': '创意', // 分类名称
        'productSn': 'lz1001', // 商品编码,需要手填.
        // promotion都可以不填,可以通过营销管理处理
        'promotionPerLimit': 0, // 活动限购/人
        'promotionPrice': 0, // 活动价格
        // 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 ,
        'promotionType': 0,
        // 上架状态：0->下架；1->上架 ,
        'publishStatus': 1,
        // 推荐状态；0->不推荐；1->推荐 ,
        'recommendStatus': 1,
        // 销量,不用处理
        'sale': 1009,
        //  以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 ,
        'serviceIds': '1,2,3', // 1,2
        'sort': 999, // 排序,降序.值越大越靠前
        'stock': 999, // 库存
        'subTitle': '泸州老窖喝了很好', // 二级标题
        'unit': '瓶', // 单位,比如 斤/辆/台
        'usePointLimit': 0, // 不需要,如果有积分,当前商品可以最多使用多少积分
        'verifyStatus': 1, //  审核状态：0->未审核；1->审核通过 ,
        'weight': 1 // 商品重量，默认为千克
      }
      // 构建一个提交需要的完整的数据对象
      // sku缺失  spData 字段,需要添加 [{"key":"颜色","value":"蓝色"},{"key":"容量","value":"32G"}]
      for (var i = 0; i < this.skuList.length; i++) {
        var sku = this.skuList[i]
        sku.spData = JSON.stringify([
          {
            key: '颜色',
            value: sku.color
          },
          {
            key: '容量',
            value: sku.size
          }
        ])
      }
      var productUse = {
        pmsSkuStockList: this.skuList,
        product: productDetail
      }
      // 如果不放心,打印下结果和接口对比!!
      // console.log(productUse)
      // 测试提交
      addProductAndSkusApi(productUse)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('提交成功!')
          } else {
            this.$message.error(errMsg)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.product-detail {
  .section-step {
    width: 80%;
    margin: 0 auto;
  }
  .content {
    margin: 30px;
  }
  .sku-input {
    width: 200px;
    margin-right: 20px;
    margin-left: 20px;
    display: inline-block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
}
</style>
